<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<%--
  Created by IntelliJ IDEA.
  User: fanyuting
  Date: 2017/4/27 0027
  Time: 上午 9:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="zh">
<head>
    <title>风险矩阵维护页面</title>
    <%@include file="/common/header.jspf"%>
    <style>
        table{
            width: 100%;
            height:90%; min-height: 50px; line-height: 30px; text-align: center; border-color:#696969;
            border-collapse: collapse;
        }
       /* table tr th, table tr td { border-color:#b6ff00; }*/
        #matrixManage{
            height: 90%;width:15%;float: left;
            margin-left: 10px;
            margin-top: 10px;
        }
        .matrix{
           height:95%;
            width:80%;
            float: left;
            margin-top: 10px;
        }
        .matrix table{
            background-color: #F5F5F5;
        }
        .radioClass{
            width:17px;
            height:17px;
            cursor: pointer;
        }
        .matrixSelectTd{
            background-color: #FFFFFF;
        }
        .matrixSelectTd:hover{
            background-color: #AFEEEE;
            cursor:pointer;
        }
    </style>
</head>
<body>
<div id="matrixManage">
    <div style="line-height: 30px;"><input class="radioClass" name="resultType" type="radio" value="people" checked />人员伤害：
        <input name="people" id="people"  style="width: 50px; height: 20px;border: solid 1px;" readonly>
    </div>
    <div style="line-height: 30px;"><input class="radioClass" name="resultType" type="radio" value="money"/>财产损失：
        <input name="meney" id="money"  style="width: 50px; height: 20px;border: solid 1px;" readonly>
    </div>
    <div style="line-height: 30px;"><input class="radioClass" name="resultType" type="radio" value="environment" />环境影响：
        <input name="environment" id="environment"  style="width: 50px; height: 20px;border: solid 1px;" readonly></div>
    <div style="line-height: 30px;"><input class="radioClass" name="resultType" type="radio" value="prestige"/>声誉影响：
        <input name="prestige" id="prestige"  style="width: 50px; height: 20px;border: solid 1px;" readonly></div>
    <div style="line-height: 30px;"><span style="margin-left: 29px;">最大值：</span>
        <input id="maxValue" name="maxValue"  style="width: 50px; height: 20px;border: solid 1px;" disabled></div>
    <div class="" style="margin:100px auto;width: 100%;">
        <%--<a class="button icon-save" id="">
            保存
        </a>--%>
       <a id="btn_save" href="javascript:void(0)" class="easyui-linkbutton"
           iconCls="fa fa-check fa-lg" style="width: 71px;" >确定</a>
        <a id="btn_cancle" href="javascript:void(0)" class="easyui-linkbutton"
           iconCls="fa fa-times fa-lg" style="margin:5px;width: 71px;">取消</a>
    </div>
</div>
<!--人员伤害-->
<div id="peopleMatrix" class="matrix">
    <table border="1" cellspacing="0" cellpadding="0" >
        <tr>
            <td rowspan="3">后果严重等级</td>
            <td>事故后果</td>
            <td colspan="${fn:length(possibilities)}">发生的可能性</td>
        </tr>
        <tr>
            <td rowspan="2">人员伤害</td>
            <c:forEach items="${possibilities}" var="pos" >
                <td>${pos.description}</td>
            </c:forEach>
        </tr>
        <tr style="height: 20px;">
            <c:forEach items="${possibilities}" var="pos" >
                <td>${pos.grade}</td>
            </c:forEach>
        </tr>
        <c:forEach items="${results}" var="res">
            <tr>
                <td>${res.grade}</td>
                <td width="300">${res.people}</td>
                <c:forEach items="${possibilities}" var="pos1">
                        <td class="matrixSelectTd"
                    <c:forEach items="${matrixLevels}" var="ml">
                        <c:if test="${ml.resultGrade==res.grade and ml.possibilityGrade ==pos1.grade }">
                            <c:forEach items="${levels}" var="l"><c:if test="${l.grade==ml.levelGrade}">
                                style="background-color:#${l.color};"
                            </c:if></c:forEach>
                        </c:if>
                    </c:forEach>
                            onclick="manageRiskGrade(this,'${res.grade}','${pos1.grade}');">${res.grade}${pos1.grade}</td>

                </c:forEach>
            </tr>
        </c:forEach>
    </table>
</div>
<!--财产损失-->
<div id="moneyMatrix" class="matrix" style="display: none;">
    <table border="1" cellspacing="0" cellpadding="0" >
        <tr>
            <td rowspan="3">后果严重等级</td>
            <td>事故后果</td>
            <td colspan="${fn:length(possibilities)}">发生的可能性</td>
        </tr>
        <tr>
            <td rowspan="2">财产损失</td>
            <c:forEach items="${possibilities}" var="pos" >
                <td>${pos.description}</td>
            </c:forEach>
        </tr>
        <tr style="height: 20px;">
            <c:forEach items="${possibilities}" var="pos" >
                <td>${pos.grade}</td>
            </c:forEach>
        </tr>
        <c:forEach items="${results}" var="res">
            <tr>
                <td>${res.grade}</td>
                <td width="300">${res.money}</td>
            <c:forEach items="${possibilities}" var="pos1">
                <td class="matrixSelectTd"
                        <c:forEach items="${matrixLevels}" var="ml">
                            <c:if test="${ml.resultGrade==res.grade and ml.possibilityGrade ==pos1.grade }">
                                <c:forEach items="${levels}" var="l"><c:if test="${l.grade==ml.levelGrade}">
                                    style="background-color:#${l.color};"
                                </c:if></c:forEach>
                            </c:if>
                        </c:forEach>
                    onclick="manageRiskGrade(this,'${res.grade}','${pos1.grade}');">${res.grade}${pos1.grade}</td>
            </c:forEach>
            </tr>
        </c:forEach>
    </table>
</div>

<!--环保矩阵-->
<div id="environmentMatrix" class="matrix" style="display: none;">
    <table border="1" cellspacing="0" cellpadding="0" >
        <tr>
            <td rowspan="3">后果严重等级</td>
            <td>事故后果</td>
            <td colspan="${fn:length(possibilities)}">发生的可能性</td>
        </tr>
        <tr>
            <td rowspan="2">环保影响</td>
            <c:forEach items="${possibilities}" var="pos" >
                <td>${pos.description}</td>
            </c:forEach>
        </tr>
        <tr style="height: 20px;">
            <c:forEach items="${possibilities}" var="pos" >
                <td>${pos.grade}</td>
            </c:forEach>
        </tr>
        <c:forEach items="${results}" var="res">
            <tr>
                <td>${res.grade}</td>
                <td width="300">${res.environment}</td>
                <c:forEach items="${possibilities}" var="pos1">
                    <td class="matrixSelectTd"
                            <c:forEach items="${matrixLevels}" var="ml">
                                <c:if test="${ml.resultGrade==res.grade and ml.possibilityGrade ==pos1.grade }">
                                    <c:forEach items="${levels}" var="l"><c:if test="${l.grade==ml.levelGrade}">
                                        style="background-color:#${l.color};"
                                    </c:if></c:forEach>
                                </c:if>
                            </c:forEach>
                        onclick="manageRiskGrade(this,'${res.grade}','${pos1.grade}');">${res.grade}${pos1.grade}</td>
                </c:forEach>
            </tr>
        </c:forEach>
    </table>
</div>
<!--声誉影响矩阵-->
<div id="prestigeMatrix" class="matrix" style="display: none;">
    <table border="1" cellspacing="0" cellpadding="0" >
        <tr>
            <td rowspan="3">后果严重等级</td>
            <td>事故后果</td>
            <td colspan="${fn:length(possibilities)}">发生的可能性</td>
        </tr>
        <tr>
            <td rowspan="2">声誉影响</td>
            <c:forEach items="${possibilities}" var="pos" >
                <td>${pos.description}</td>
            </c:forEach>
        </tr>
        <tr style="height: 20px;">
            <c:forEach items="${possibilities}" var="pos" >
                <td>${pos.grade}</td>
            </c:forEach>
        </tr>
        <c:forEach items="${results}" var="res">
            <tr>
                <td>${res.grade}</td>
                <td width="300">${res.prestige}</td>
                <c:forEach items="${possibilities}" var="pos1">
                    <td class="matrixSelectTd"
                            <c:forEach items="${matrixLevels}" var="ml">
                                <c:if test="${ml.resultGrade==res.grade and ml.possibilityGrade ==pos1.grade }">
                                    <c:forEach items="${levels}" var="l"><c:if test="${l.grade==ml.levelGrade}">
                                        style="background-color:#${l.color};"
                                    </c:if></c:forEach>
                                </c:if>
                            </c:forEach>
                        onclick="manageRiskGrade(this,'${res.grade}','${pos1.grade}');">${res.grade}${pos1.grade}</td>
                </c:forEach>
            </tr>
        </c:forEach>
    </table>
</div>
<div id="selectRiskLevel" style="width: 100%;display: none;" align="center">
    <form id="levelGradeForm">
    <div style="width: 100%; margin-top: 20px;">
        矩阵值：<span id="selectRiskLevel_matrix"  style="width: 100px;"></span>
        <%--风险可能性等级：
        风险后果等级：<input id="selectRiskLevel_result" class="easyui-textbox" style="width: 120px;" readonly>--%>
        <input type="hidden" id="selectRiskLevel_result" name="resultGrade">
        <input type="hidden" id="selectRiskLevel_possibility" name="possibilityGrade">
    </div>
    <div style="width: 100%; margin-top: 10px;">
        对应风险等级：
        <select class="easyui-combox" style="width: 200px;height: 30px;" name="levelGrade" id="levelGrade">
            <c:forEach items="${levels}" var="level">
                <option value="${level.grade}" color="${level.color}"<%-- style="background-colorkg: #${level.color};"--%>>${level.name}</option>
            </c:forEach>
        </select>
    </div>
    </form>

</div>
</body>
<script type="text/javascript">
    var index = "";
    var td = null;
    var resultType='people';
    var isEdit ="${param.isEdit}";
    //如果是编辑页面，显示已经选中的数据
    if(isEdit==1){
        var riskAssessPeople = '${param.riskAssessPeople}';
        var riskAssessMoney = '${param.riskAssessMoney}';
        var riskAssessEnvironment = '${param.riskAssessEnvironment}';
        var riskAssessPrestige = '${param.riskAssessPrestige}';
        var riskAssessMax = '${param.riskAssessMax}';
        $("#people").val(riskAssessPeople);
        $("#money").val(riskAssessMoney);
        $("#environment").val(riskAssessEnvironment);
        $("#prestige").val(riskAssessPrestige);
        $("#maxValue").val(riskAssessMax);
    }
    $("input[name='resultType']").on("click",function(){
        resultType= this.value;

        $(".matrix").hide();
        $("#"+resultType+"Matrix").show();
    });
    /**
     * 保存按钮的方法
     */
    $("#btn_save").on("click",function(){
        var riskAssessPeople = $("#people").val();
        var riskAssessMoney = $("#money").val();
        var riskAssessEnvironment = $("#environment").val();
        var riskAssessPrestige = $("#prestige").val();
        if(riskAssessPeople==""||riskAssessMoney==""||riskAssessEnvironment==""||riskAssessPrestige==""){
            layer.msg("请填写信息!",{time:1000,icon:2});
        }else{
            var obj = {};
            obj.riskMax = $("#maxValue").val();
            obj.riskPeople =riskAssessPeople;
            obj.riskMoney =riskAssessMoney;
            obj.riskEnvironment =riskAssessEnvironment;
            obj.riskPrestige =riskAssessPrestige;
            obj.riskColor =  $("#maxValue").css("background-color");
            WindowManager.closeLayer({
                returnValue:obj
            });
            /*parent.getRiskAssessInfo(obj);
            parent.layer.close(parent.layer.getFrameIndex(window.name));*/
        }

    });
    $("#btn_cancle").on("click",function(){
        parent.layer.close(parent.layer.getFrameIndex(window.name));
    });
    /**
     * 点击风险级别触发的事件
     * @param obj
     * @param resultGrade
     * @param possibilityGrade
     */
    function manageRiskGrade(obj,resultGrade,possibilityGrade){
    $(obj).parent().parent().children().children().css("color","#000000");
    $(obj).css("color",'#00BFFF');
    $("#"+resultType).val(resultGrade+''+possibilityGrade);
    //设置背景颜色
    $("#"+resultType).css("background-color",$(obj).css("background-color"));
    //比较最大值，并为其设置值
    var people = $("#people").val();
    var money = $("#money").val();
    var environment = $("#environment").val();
    var prestige =$("#prestige").val();
    var max = people;
    //将字符串转数字
    var maxVal = parseToNum(people);
    var moneyVal = parseToNum(money);
    var environmentVal = parseToNum(environment);
    var prestigeVal = parseToNum(prestige);

    var colorId = 'people';
    if(moneyVal>maxVal){
        maxVal = moneyVal;
        max=money;
        colorId = 'money';
    }
    if(environmentVal>maxVal){
        maxVal = environmentVal;
        max = environment;
        colorId = 'environment';
    }
    if(prestigeVal>maxVal){
        maxVal = prestigeVal;
        max = prestige;
        colorId = 'prestige';
    }
    $("#maxValue").val(max);
    //设置背景颜色
    $("#maxValue").css("background-color",$('#'+colorId).css("background-color"));
    var radio = $("input[name='resultType']");
        for (var i=0; i<radio.length; i++){
                if(radio[i].checked){
                   // $(radio[i]).attr("checked",false);
                    $(radio[i+1]).attr("checked",true);
                    $(radio[i+1]).click();
                    return ;
                }
        }
   /* for (i=0; i<radio.length; i++) {
        alert($(radio[i]).attr("checked"));
        if (radio[i].checked=true) {
            alert(i);
            $(radio[i+1]).attr("checked",true);
            //alert(radio[i].value)
        }
    }*/
}
var parseToNum=function (val){
    if(val !=null&& val!=''){
        var v1 = val.substring(0,1);
        var v2 = val.substring(1,2);
        var result = 0;
        if(v1=='A'){
            result = 1 * v2;
        }else if(v1=='B'){
            return 2*v2;
        }else if(v1=='C'){
            return 3*v2;
        }else if(v1=='D'){
            return 4*v2;
        }else if(v1=='E'){
            return 5*v2;
        }else if(v1=='F'){
            return 6*v2;
        }
        return result;
    }else{
        return 0;
    }

}
</script>
</html>
